import { Button, Dropdown, Menu, Modal, Table, TableProps } from 'antd'
import { Pin } from 'components/pin'

// import { rejects } from 'assert'
import dayjs from 'dayjs'
import React from 'react'
import { Link } from 'react-router-dom'
import { Project, User } from 'types'
import { useDeleteProject, useEditProject } from 'utils/project'

import { useProjectModal, useProjectsQueryKey } from './util'


interface ListProps extends TableProps<Project> {
  // list:Project[],
  users: User[]

  // refresh?:() => void
  // setProjectModalOpen: (isOpen:boolean) => void
}
// export default function List( {list, users}:ListProps ) {
export default function List({ users, ...props }: ListProps) {

  // return (
  //   <div>
  //     <table>
  //       <thead>
  //         <tr>
  //           <th>名称</th>
  //           <th>负责人</th>
  //         </tr>
  //       </thead>
  //       <tbody>
  //         { 
  //           list.map(project =>(
  //             <tr key={project.id}>
  //               <td>{project.name}</td>
  //               <td>{users.find(user => user.id === project.personId)?.name || '未知'}</td>
  //               {/*{?.name表示前面的表达式的内容为真时显示name}*/}
  //             </tr>))
  //         }
  //       </tbody>
  //     </table >
  //   </div>
  // )

  const { mutate } = useEditProject(useProjectsQueryKey())
  const pinProject = (id: number, pin: boolean) => mutate({ id, pin })
  // const pinProject = (id: number)=> (pin: boolean) => mutate({ id, pin }).then(props.refresh)
  const {open} = useProjectModal()
  


  return <Table
    rowKey={'id'}
    pagination={false}
    columns={[
      {
        title: <Pin checked={true} disabled={true}></Pin>,
        render(value, project) {
          return <Pin checked={project.pin} onCheckedChange={pin =>
            // mutate({id: project.id, pin})
            pinProject(project.id,pin)
          } />
        }
      },
      {
        title: '名称',
        key: "name",
        dataIndex: 'name',
        sorter: (a, b) => a.name.localeCompare(b.name),
        render(value, project) {
          return <Link to={String(project.id)}>{project.name}</Link>
        }
      },
      {
        title: '部门',
        key: "organization",
        dataIndex: 'organization',
        sorter: (a, b) => a.name.localeCompare(b.name)
      },
      {
        title: "负责人",
        key: "personId",
        render(value, project) {
          return <span key={project.created}>{users.find(user => user.id === project.personId)?.name || '未知'} </span>
        }
      },
      {
        title: '创建时间',
        key: "created",
        render(value, project) {
          return (<span key={project.created}>{project.created ? dayjs(project.created).format("YYYY-MM-DD") : ''}</span>)
        }
      },
      {
        render(value,project) {
          return(<More project={project}></More> )
        }
      }
      // ]} dataSource={list}>
    ]} {...props}>

  </Table>
}

const More = ({project}:{project:Project}) => {
  const {startEdit} = useProjectModal()
  const editProject = (id: number)=> () => startEdit(id)

  const {mutate:deleteProject} = useDeleteProject(useProjectsQueryKey())

  const confirmDeleteProject = (id:number) =>{
    Modal.confirm({
      title:"确定删除这个项目吗？",
      content:"点击确定删除",
      okText:"确定",
      onOk(){
        deleteProject(id)
      }
    })
  }
  return (
    <Dropdown overlay={
      <Menu>
        {/* <Menu.Item key={'edit'}>
          {/* <Button type='link' onClick={ () => props.setProjectModalOpen(true)}>编辑</Button>
          <Button type="link" onClick={open}>编辑</Button>
        </Menu.Item> */}
        <Menu.Item onClick={editProject(project.id)} key={'edit'}>编辑</Menu.Item>
        <Menu.Item onClick={()=> confirmDeleteProject(project.id)} key={'delete'}>删除</Menu.Item>
      </Menu>
      }>
      <Button type='link'>...</Button>
    </Dropdown>
  )
}